<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload.css" />
<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload-ui.css" />
<link rel="stylesheet" href="__PUBLIC__/css/select2/select2.min.css" />
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">修改用户</h4>
        </div>
        <form style="padding:4%;height:500px;overflow-y:auto;" id="editUserForm" data-toggle="validator" role="form">
            <div class="form-group">
                <label for="recipient-name" class="control-label">登录名:</label>
                <input type="text" class="form-control" name="user_name" pattern="^[_A-z0-9]{1,}" value="{$user.user_name}" data-error="用户名需要字母开头,最少4位!" data-minlength="4" required>
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">真实姓名:</label>
                <input type="text" class="form-control" name="real_name" pattern="[\u4e00-\u9fa5]{2,}" data-error="请输入至少两位的中文!" value="{$user.real_name}" data-minlength="2" required>
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">登录密码:</label>
                <input type="password" class="form-control" name="password" value="" placeholder="为空不修改密码">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">性别:</label>
                <input type="radio" id="radio_1" <if condition="$user['gender'] eq 1">checked="checked"</if>  value="1" name="gender" />
                <label for="radio_1">男</label>

                <input type="radio" id="radio_0" <if condition="$user['gender'] eq 0">checked="checked"</if>  value="0" name="gender" />
                <label for="radio_0">女</label>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">手机号:</label>
                <input type="text" class="form-control" name="mobile" value="{$user.mobile}" pattern="^1[34578]\d{9}$" data-error="请输入正确的手机号!" required>
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">邮箱:</label>
                <input type="email" class="form-control" name="email" value="{$user.email}">
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">用户组:</label>
                <select id="roleList" name="role_id" class="form-control" style="width: 150px;">
                    <volist name="roleList" id="role">
                        <option <if condition="$user['role_id'] eq $role['id']">selected="selected"</if> value="{$role.id}">{$role.name}</option>
                    </volist>
                </select>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">头像:</label>
            
                <if condition="$user['avatar'] neq '/images/avatar.png'">
                    <img id="userAvatarImg" src="{$user.avatar}" width='100px' style="border-radius: 50%" />
                    <else />
                    
                    <img id="userAvatarImg"  src="__PUBLIC__/images/avatar.png" width='100px' style="border-radius: 50%" />
                </if>
                <input id="fileupload" type="file" name="files[]" multiple style="display: none;">
            </div>
            <div class="form-group">
                <label for="message-text" class="control-label">状态:</label>
                <input type="checkbox" name="_status" value="{$user.status}" />
                <input type="hidden" name="status" value="{$user.status}" />
            </div>
            <input type="hidden" name="avatar" id="avatar" value="{$user.avatar}" />
            <input type="hidden" name="userId" value="{$user.id}" />
        </form>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
            <button type="button" id="userSave" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-ui.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/select2/select2.min.js"></script>
<script>
    var status = "{$user.status}";
    
    $("#roleList").select2({
            placeholder: "选择用户组"
        });
    $(function () {
        $("#editUserForm").validator();
        var switchOption = {
            onText: "开",
            offText: "关",
            onColor: "success",
            offColor: "info",
            state: true,
            onSwitchChange: function (event, state) {
                if (state == true) {
                    $(this).val("1");
                } else {
                    $(this).val("0");
                }
                var value = $(this).val();
                $("input:hidden[name='"+$(this).attr("name").substring(1)+"']").val(value);
            }
        };
        if (status == "0") {
            switchOption.state = false;
        } else {
            switchOption.state = true;
        }
        $("input:checkbox[name='_status']").bootstrapSwitch(switchOption);

    })

    $('input:radio').iCheck({
        checkboxClass: 'icheckbox_flat-blue',
        radioClass: 'iradio_flat-blue',
        increaseArea: '-10%' // optional
    });

    $("#userAvatarImg").click(function(){
        $('#fileupload').click();
    })
    $('#fileupload').fileupload({
        url: "{:U('Admin/Upload/index')}",
        dataType: "",
        formData: {type: "avatar"},
        autoUpload: true,
        done: function (e, data) {
            var files = data.result;
            var file = files[0];
//            attache.push(file.attachement_id);
            //console.log(file.filePath);
            $("#userAvatarImg").attr("src",file.filePath);
            $("#avatar").val(file.filePath);
//            var item = '<img src="' + file.filePath + '" style="width:60px;height:60px;margin:10px;" onclick="removeImg(this,\'' + file.attachement_id + '\')">'
//            $(item).appendTo('#files');
        }
    });

    $("#userSave").click(function () {
        var validator = $("#editUserForm").data("bs.validator");
        validator.validate();
        if(!validator.hasErrors()){
            $.ajax({
                url: "{:U('Admin/User/doEditUser')}",
                type: "post",
                dataType: "json",
                data: $("#editUserForm").serialize(),
                success: function (data) {
                    if(data.status){
                        $("#commonModal").modal('toggle');
                        common.alert("提示", "用户修改成功!", function () {
                            common.reload();
                        });
                    }else{
                        common.alert("提示", data.msg);
                    }
                }
            });
        }
    })

    
</script>